<template>
  <div>
    <ul>
      <li v-for="msg in msgList" :key="msg.id">
				<!-- 比较不友好的写法 -->
        <!-- <router-link :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">
					{{ msg.title }}
				</router-link> -->

				<router-link 
					:to="{
						path:'/home/message/detail',
						query:{
							id:msg.id,
							title:msg.title
						}
					}"
				>
					{{ msg.title }}
				</router-link>

			</li>
    </ul>
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      msgList: [
        { id: "qwe1", title: "消息001" },
        { id: "qwe2", title: "消息002" },
        { id: "qwe3", title: "消息003" },
      ],
    };
  },
};
</script>